'use strict';

import  React, {Component} from 'react'
import {Modal, Text, TouchableHighlight, View, DatePickerIOS, Animated} from 'react-native'
import Style from './Style';
import Moment from 'moment';

const FORMATS = {
    'date': 'YYYY-MM-DD',
    'datetime': 'YYYY-MM-DD HH:mm',
    'time': 'HH:mm'
};

// type DatePickerSheetIOSOptions = {
//     onDateChange: React.PropTypes.func,
//     mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
//     date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
//     minDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
//     maxDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
//     format: React.PropTypes.string
// }




export default class DatePickerSheetIOS extends Component {

    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            animatedHeight: new Animated.Value(0),
            date:this.getDate(),
            mode:"date"
            // onSelect: {() => {(dateStr, date) => void}}
        };
        // this.consoleMySelf = this.consoleMySelf.bind(this);
        this.setModalVisible = this.setModalVisible.bind(this);
        this.onDateChange = this.onDateChange.bind(this);
        this.onPressCancel = this.onPressCancel.bind(this);
        this.onPressConfirm = this.onPressConfirm.bind(this);
        this.showPickerController = this.showPickerController.bind(this);




    }







    setModalVisible(visible) {

        // slide animation
        if (!visible) {
            return Animated.timing(
                this.state.animatedHeight,
                {
                    toValue: 0,
                    duration: 300
                }
            ).start(() => {
                this.setState({modalVisible: visible});
            });
        } else {
            this.setState({modalVisible: visible});
            return Animated.timing(
                this.state.animatedHeight,
                {
                    toValue: 250,
                    duration: 300
                }
            ).start(() => {
                console.log("animated starting");
            });

        }
    }

    // static consoleHollyCrap() {
    //     console.log("hollyCrap")
    // }


    onDateChange(date) {
        this.setState({
            date: date
        })
    }

    onPressCancel() {
        this.setModalVisible(false)


    }

    onPressConfirm() {

        this.datePicked()
        this.setModalVisible(false)

    }

    showPickerController() {

        // console.log("date" + date.string)
        // this.setState({date: this.getDate(date)});
        // this.setState({mode: mode});
        // callBack = this.props.onDateChange
        this.setModalVisible(true);
    }




    datePicked() {
        if (typeof this.props.onDateChange === 'function') {
            this.props.onDateChange(this.getDateStr(this.state.date), this.state.date);
        }
    }

    getDate(date = this.props.date) {
        const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props;

        // date默认值
        if (!date) {
            let now = new Date();
            if (minDate) {
                let _minDate = this.getDate(minDate);

                if (now < _minDate) {
                    return _minDate;
                }
            }

            if (maxDate) {
                let _maxDate = this.getDate(maxDate);

                if (now > _maxDate) {
                    return _maxDate;
                }
            }

            return now;
        }

        if (date instanceof Date) {
            return date;
        }

        return Moment(date, format).toDate();
    }

    getDateStr(date = this.props.date) {
        const {mode, format = FORMATS[mode]} = this.props;

        if (date instanceof Date) {
            return Moment(date).format(format);
        } else {
            return Moment(this.getDate(date)).format(format);
        }
    }




    render() {

        return (<View style={{flex: 1}}>

                <Modal
                    animationType={"none"}
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                        alert("ModalHasBeenClosed")
                    }}
                >
                    <View style={{flex: 1}}>
                        <View style={{
                            flex: 1, alignItems: 'flex-end',
                            flexDirection: 'row', backgroundColor: "#00000077"
                        }}>
                            <View style={{flex: 1}}>
                                <Animated.View
                                    style={[Style.datePickerCon, {height: this.state.animatedHeight}]}
                                >
                                    <View style={{flex: 1, backgroundColor: "white"}}>
                                        <View style={{flex: 1}}>
                                            <DatePickerIOS
                                                date={this.state.date}
                                                mode={this.props.mode}
                                                onDateChange={this.onDateChange}
                                                style={[Style.datePicker]}
                                                minimumDate={this.props.minDate && this.getDate(this.props.minDate)}
                                                maximumDate={this.props.maxDate && this.getDate(this.props.maxDate)}
                                            ></DatePickerIOS>

                                            <TouchableHighlight
                                                underlayColor={'transparent'}
                                                onPress={ this.onPressCancel }
                                                style={[Style.btnText, Style.btnCancel]}
                                            >
                                                <Text style={[Style.btnTextText, Style.btnTextCancel]}>
                                                    {"取消"}
                                                </Text>
                                            </TouchableHighlight>
                                            <TouchableHighlight
                                                underlayColor={'transparent'}
                                                onPress={ this.onPressConfirm }
                                                style={[Style.btnText, Style.btnConfirm]}
                                            >
                                                <Text style={[Style.btnTextText]}>{"确定"}</Text>
                                            </TouchableHighlight>
                                        </View>
                                    </View>
                                </Animated.View>
                            </View>
                        </View>
                    </View>
                </Modal>

                <TouchableHighlight style={{marginTop: 22}} onPress={this.showPickerController }>
                    <Text style={{color: "black"}}>Show Modal</Text>

                </TouchableHighlight>
            </View>
        );
    }




}



DatePickerSheetIOS.propTypes = {
    onDateChange: React.PropTypes.func,
    mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
    date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
    minDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
    maxDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
    format: React.PropTypes.string
    // showPicker: React.PropTypes.bool
}


// modules.exports = ModalExample;
